import React, { useMemo } from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';
const Father = () => {
    const [keyword, setKeyword] = useState('');
    const [schoolArr, setSchoolArr] = useState([]);
    const [count, setCount] = useState(0);
    const searchFn = (e) => {
        setKeyword(e.target.value)
    }

    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            // 
            setSchoolArr(res.data.data.list1)
        })
    }, [])

    // const filterArr = schoolArr.filter((item) => {
    //     return item.school_name.indexOf(keyword) != -1
    // })
    // 注意: 当修改count 值的时候, 函数组件重新执行,因为state数据被修改了. 所以重新过滤, 但是
    // keyword 并没有改变, 造成性能浪费
    // 如何优化性能?
    // 希望只有keyword 条件发生变化,才进行过滤 ,此时使用useMemo
    // 语法: const 新值=  useMemo(()=>返回的新值,[监听的数据的变化])
    // 当监听的数据发生变化时, 才执行useMemo参数1 中的函数,并且返回的值就是新值变量

    // 面试回答:
    // useMemo 相当于vue中computed计算属性, 当依赖的数据发生变化,才会重新计算,如果依赖的数据
    // 没有变化,那么就使用上一次的缓存的值,从而不会重新计算
    const newFilterArr = useMemo(() => {
        console.log('执行了');
        return schoolArr.filter((item) => {
            return item.school_name.indexOf(keyword) != -1
        })
    }, [keyword, schoolArr])
    // console.log('filterArr');

    return (
        <div>
            <p onClick={() => setCount(count + 1)}>count:{count}</p>
            {/* 筛选的输入框 */}
            <input type='text' value={keyword} onChange={searchFn} />
            {/* 数据列表 */}
            <ul>
                {
                    newFilterArr.map((item) => {
                        return <li key={item.id}>{item.school_name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Father;
